var grid;

Ext.onReady(function()
{
    var store = new X.store.Json({
        url : '/departamento/ajax-listar',
        fields : [
            'codigoDepartamento',
            'nombreDepartamento',
            'telefono',
            'email',
            'cajaChica',
            'pname'
        ]
    });

    grid = new X.grid.GridPanel({

        id       : 'grid',
        title    : 'Lista de Departamentos',
        height   : 500,
        width    : 855,
        store    : store,

        columns:[
            new X.column.Text  ({header: 'Código',      dataIndex: 'codigoDepartamento', width: 56}),
            new X.column.Text  ({header: 'Nombre',      dataIndex: 'nombreDepartamento', width: 190}),
            new X.column.Text  ({header: 'Pertenece a', dataIndex: 'pname', width: 190}),
            new X.column.Text  ({header: 'Teléfono',    dataIndex: 'telefono',           width: 80}),
            new X.column.Text  ({header: 'Email',       dataIndex: 'email',              width: 180}),
            new X.column.Money ({header: 'CajaChica',   dataIndex: 'cajaChica',          width: 100}),

            new X.column.Edit  ({editUrl    : '/departamento/editar',
                                 idColumn   : 'codigoDepartamento'}),

            new X.column.Delete({deleteUrl  : '/departamento/ajax-eliminar',
                                 idColumn   : 'codigoDepartamento',
                                 msgName    : 'departamento',
                                 msgNameCol : 'nombreDepartamento'})
        ]
    });
    
    grid.getBottomToolbar().pageSize = 20;
});
